<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <script src="/javascripts/vue@3.0.11.js" ></script>
</head>
<body>

    <div id="first">
        <div class="border" style="margin:25px 0">
            <input type="text" v-model="nickname">
        </div>
        <!-- 3、使用 Welcome 组件 -->
        <!-- 使用组件时可以采用 kebab-case 命名来引用 -->
        <welcome welcome-name="朱文杰"></welcome>
        <!-- 将 welcome 当作 HTML标签来对待，
             则可以通过 welcome 标签的 welcome-name 属性(attribute)向子组件传递数据 -->
        <welcome welcome-name="阿麦"></welcome>
        <!-- 将 welcome 当作 HTML标签来对待，则可以为 welcome-name 属性(attribute) 绑定值 -->
        <welcome :welcome-name="nickname"></welcome>
    </div>

    <script>

        // 1、定义组件
        const component = {
            // 在使用组件时指定的每个属性都对应者一个 prop ，众多 prop 集中在一个 props 中声明
            props: [ 'welcomeName' ] ,
            template: `<div class="border" style="margin:25px 0">
                          欢迎{{welcomeName}}来到云创动力
                       </div>`
        }

        const app = Vue.createApp({
            data(){
                return { nickname: '朱亚红' }
            },
            // 2、注册 Welcome 组件(本地注册)
            components: {
                // 组件名称采用 PascalCase 命名法，将来使用组件时即可采用 kebab-calse 命名来引用
                Welcome: component
            }
        });
        console.log( app );
        const vm = app.mount( '#first' );
    </script>

</body>
</html>